<template>
	<view class="page">
		<view class="topVue flex-between align-center padding-row30">
			<image src="/static/index/connect.png" style="width: 40rpx; height: 40rpx;" @click="connectClick"></image>
			<text style="font-weight: 700; font-size: 36rpx; color: #333333;">{{ $t('首页') }}</text>
			<image src="/static/index/language.png" style="width: 40rpx; height: 40rpx;" @click="isLanguage=true">
			</image>
		</view>

		<u-gap height="92"></u-gap>

		<!-- 轮播图 -->
		<view class="swiperVue margin0">
			<u-swiper :list="banners" :height="260" name="path"></u-swiper>
		</view>

		<!-- 公告 -->
		<view class="hintVue margin20 padding-row20 flex align-center" @click="$tools.route('./message')">
			<image src="/static/index/hint.png" style="width: 30rpx; height: 30rpx;"></image>
			<swiper class="swiper" :touchable="false" circular :autoplay="true" :indicator-dots="false"
				:vertical="true">
				<swiper-item class="swiperItem flex align-center padding-row10" v-for="(item, index) in notices"
					:key="index">
					<view class="flex-1 text line-1">{{ item.title }}</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 总销毁数量 -->
		<view class="dataVue margin20 padding-row30">{{ $t('总销毁JNP数量') }}：{{ burnAmount | number(2) }}</view>

		<!-- 卡牌快捷交易区 -->
		<view class="thVue flex align-center padding-row30 margin30">
			<view class="line"></view>
			<text
				style="font-size: 30rpx; color: #333333; padding-left: 8rpx; font-weight: 600;">{{ $t('卡牌快捷交易区') }}</text>
		</view>

		<view class="flex flex-wrap margin20 padding-row30">
			<view class="item text-center relative" v-for="(item, index) in list" :key="item.id" :class="{
      'item-1': item.id % 12 === 1,
      'item-2': item.id % 12 === 2,
      'item-3': item.id % 12 === 3,
      'item-4': item.id % 12 === 4,
      'item-5': item.id % 12 === 5,
      'item-6': item.id % 12 === 6,
      'item-7': item.id % 12 === 7,
      'item-8': item.id % 12 === 8,
      'item-9': item.id % 12 === 9,
      'item-10': item.id % 12 === 10,
      'item-11': item.id % 12 === 11,
      'item-12': item.id % 12 === 0
    }">
				<u-gap height="8"></u-gap>
				<text style="font-size: 24rpx; color: #FFFFFF;">{{ $t('编号')}}{{ item.serialNo }}</text>
				<view class="absolute-center price">{{item.price}}USDT</view>
				<view class="buy absolute-center" @click="toBuy(item)" v-if="item.canBuy === true">{{ $t('购买') }}</view>
			</view>
		</view>

		<!-- 购买弹框 -->
		<u-popup v-model="show" border-radius="16" z-index="100" mode="center">
			<view style="width: 540rpx;">
				<view class="padding40">
					<view class="tip text-center">{{ $t('确认购买') }}</view>
					<view class="content text-center margin50">{{ cardPrice }} USDT</view>
				</view>
				<view class="flex margin40">
					<view class="w50 cancel text-center" @click="show=false">{{ $t('取消') }}</view>
					<view class="w50 confirm text-center" @click="buyFun">{{ $t('确定') }}</view>
				</view>
			</view>
		</u-popup>

		<!-- 绑定地址 -->
		<u-popup v-model="show20" border-radius="16" z-index="100" mode="center">
			<view style="width: 540rpx;">
				<view class="padding40">
					<view class="tip text-center">{{ $t('绑定钱包地址') }}</view>
					<textarea v-model="address" :placeholder="$t('请输入钱包地址')"
						placeholder-style="font-size: 28rpx; color: #AAAAAA;"></textarea>
				</view>
				<view class="flex margin20">
					<view class="w50 cancel text-center" @click="show20=false">{{ $t('取消') }}</view>
					<view class="w50 confirm text-center" @click="bandFun">{{ $t('确定') }}</view>
				</view>
			</view>
		</u-popup>

		<!-- 语言选择 -->
		<view class="maskVue fixed" v-if="isLanguage" @click.stop="isLanguage=false">
			<u-icon name="arrow-up-fill" color="#fff" size="30" class="absolute"
				style="top: 70rpx; right: 35rpx;"></u-icon>
			<view class="maskBox absolute">
				<view class="li text-center" :class="{active: $i18n.locale=='Cn' }" @click="setLang('Cn')">简体中文</view>
				<view class="li text-center" :class="{active: $i18n.locale=='En' }" @click="setLang('En')">English
				</view>
				<view class="li text-center" :class="{active: $i18n.locale=='Kn' }" @click="setLang('Kn')">한국어</view>
			</view>
		</view>
	</view>
</template>

<script>
  import init from "../../index";
	export default {
		data() {
			return {
				banners: [],
				notices: [],
				show: false,
				isLanguage: false,
				show20: false,
				address: "",
				cardId: "",
				cardPrice: "",
				list: [],
				pageNum: 1,
				pageSize: 16,
				isLastPage: false,
				burnAmount: 0,
			}
		},

		async onLoad() {
			this.pageNum = 1
			this.list = []
			this.getList()
			this.getBanners()
			this.getMessage()
			this.getInfo()
			this.getParentInfo()
			
		},

		onReachBottom() {
			if (this.isLastPage) return
			this.pageNum++
			this.getList()
		},

		onHide() {
			if (this.show) this.show = false
			if (this.show20) this.show20 = false
		},

		methods: {
			// 获取是否绑定上级状态
			async getParentInfo() {
				await this.$request("/front/user/parentIfo").then(async res => {
					if (res.code === -2) {
						await init.initAddress("index");
					} else {
						this.show20 = res.data.parentId == 0
					}
				})
			},

			async connectClick() {
				await init.initAddress();
			},

			// 绑定上级
			async bandFun() {
				const res = await this.$request("/front/user/bindLeader", {
					address: this.address
				})
				if (res.code === 0) {
					this.show20 = false
					this.address = ""
					this.$u.toast(this.$t("成功"))
					this.getParentInfo()
				} else {
					this.$u.toast(res.msg)
				}
			},

			toBuy(item) {
				this.cardId = item.id
				this.cardPrice = item.price
				this.show = true
			},

			// 购买
			async buyFun() {
				const res = await this.$request("/front/card/buyCard", {
					cardId: this.cardId
				})
				if (res.code === 0) {
					this.show = false
					this.$u.toast(this.$t("成功"))
					this.list = []
					this.pageNum = 1
					await this.getList()
				} else {
					console.log(res)
					this.$u.toast(res.msg)
				}
			},

			// 获取卡片列表
			async getList() {
				const res = await this.$request("/front/card/cardList", {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if (res.code === 0) {
					let list = res.data.list
					this.list = this.list.concat(list)
					this.isLastPage = res.data.isLastPage
				}
			},

			// 获取轮播图
			async getBanners() {
				const res = await this.$request("/front/index/slideList")
				if (res.code === 0) this.banners = res.data
			},

			// 获取公告
			async getMessage() {
				const res = await this.$request("/front/index/contentList")
				if (res.code === 0) this.notices = res.data
			},

			// 获取JNP总销毁数量
			async getInfo() {
				const res = await this.$request("/front/index/getBurnAmount")
				if (res.code === 0) this.burnAmount = res.data
			},

			// 设置语言
			setLang(lang) {
				this.$i18n.locale = lang
				uni.setStorageSync("language", lang)
				uni.setTabBarItem({
					index: 0,
					text: this.$t('首页')
				})
				uni.setTabBarItem({
					index: 1,
					text: this.$t('卡牌')
				})
				uni.setTabBarItem({
					index: 2,
					text: this.$t('钱包')
				})
				uni.setTabBarItem({
					index: 3,
					text: this.$t('签到')
				})
				uni.setTabBarItem({
					index: 4,
					text: this.$t('团队')
				})
				this.show20 = false
			}
		}
	}
</script>

<style lang="less" scoped>
	.topVue {
		width: 100%;
		height: 92rpx;
		background: linear-gradient(to bottom, #E3EEFF, #EBF3FF);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}

	.swiperVue {
		width: 690rpx;
		height: 260rpx;
	}

	.hintVue {
		width: 690rpx;
		height: 68rpx;
		background: #F2F4FF;
		border-bottom: 8rpx;

		.swiper {
			flex: 1;
			height: 68rpx;
			border-radius: 12rpx;

			.swiperItem {
				width: 100%;
				height: 88rpx;

				.text {
					font-size: 26rpx;
					color: #406FC2;
				}
			}
		}
	}

	.dataVue {
		width: 690rpx;
		height: 108rpx;
		background: url("../../static/index/total_des_bg.png") no-repeat;
		background-size: 100% 100%;
		font-weight: 600;
		font-size: 30rpx;
		line-height: 108rpx;
	}

	.thVue {
		width: 100%;
		height: 32rpx;

		.line {
			width: 6rpx;
			height: 30rpx;
			background: #4D9FED;
			border-radius: 8rpx;
		}
	}

	.item {
		width: 216rpx;
		height: 320rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;

		.price {
			color: #fff;
			bottom: 80rpx;
		}

		.buy {
			width: 117rpx;
			height: 40rpx;
			background: #4E9EEE;
			border-radius: 20rpx;
			color: #fff;
			font-size: 24rpx;
			line-height: 37rpx;
			bottom: 30rpx;
		}
	}

	.item:nth-child(3n) {
		margin-right: 0;
	}

  .item-1 {
    background: url("../../static/bg/1.png");
    background-size: 100% 100%;
  }
  .item-2 {
    background: url("../../static/bg/2.png");
    background-size: 100% 100%;
  }
  .item-3 {
    background: url("../../static/bg/3.png");
    background-size: 100% 100%;
  }
  .item-4 {
    background: url("../../static/bg/4.png");
    background-size: 100% 100%;
  }
  .item-5 {
    background: url("../../static/bg/5.png");
    background-size: 100% 100%;
  }
  .item-6 {
    background: url("../../static/bg/6.png");
    background-size: 100% 100%;
  }

  .item-7 {
    background: url("../../static/bg/7.png");
    background-size: 100% 100%;
  }
  .item-8 {
    background: url("../../static/bg/8.png");
    background-size: 100% 100%;
  }
  .item-9 {
    background: url("../../static/bg/9.png");
    background-size: 100% 100%;
  }
  .item-10 {
    background: url("../../static/bg/10.png");
    background-size: 100% 100%;
  }
  .item-11 {
    background: url("../../static/bg/11.png");
    background-size: 100% 100%;
  }
  .item-12 {
    background: url("../../static/bg/12.png");
    background-size: 100% 100%;
  }

	.tip {
		color: #666;
		font-weight: 600;
		font-size: 32rpx;
	}

	.content {
		color: #000;
		font-size: 46rpx;
	}

	textarea {
		width: 100%;
		height: 120rpx;
		background: #F5F5F5;
		border-radius: 8rpx;
		display: block;
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 15rpx;
		font-size: 28rpx;
	}

	.cancel {
		color: #999999;
		font-size: 32rpx;
		line-height: 88rpx;
		border-top: #E5E6EB 1rpx solid;
		border-right: #E5E6EB 1rpx solid;
	}

	.confirm {
		color: #333333;
		font-size: 32rpx;
		line-height: 88rpx;
		border-top: #E5E6EB 1rpx solid;
	}

	.maskVue {
		width: 100vw;
		height: 100vh;
		background: transparent;
		z-index: 1001;
		left: 0;
		top: 0;

		.maskBox {
			width: 270rpx;
			height: 240rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
			top: 92rpx;
			right: 18rpx;
			border-radius: 10rpx;
			padding: 15rpx;

			.li {
				width: 240rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 24rpx;
				color: #3D3D3D;
			}

			.active {
				background: #F1F7FF;
				border-radius: 8rpx;
				color: #4D9FED;
			}
		}
	}
</style>
